<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="head">个人信息</div>
      </el-col>
      <el-col :span="24">
        <div class="center avatar">
          <el-avatar :size="150" src="static/images/avatar-0.jpg" fit="fill"></el-avatar>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="center nick">昵称：{{userInfo.nick}}</div>
        <div class="center username">用户名：{{userInfo.username}}</div>
        <div class="center age">年龄：{{userInfo.age}}</div>
        <div class="center age">生日：{{userInfo.birthday | formatTime}}</div>
        <div class="center time">注册时间：{{userInfo.time | formatTime}}</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getUserInfo } from "@/api/user/index";
import { getToken } from "@/libs/util";
import dateTime from "date-time";

export default {
  name: "user",
  data() {
    return {
      userInfo: {}
    };
  },
  methods: {
    getData(data) {
      getUserInfo(data).then(res => {
        console.log(res.data);
        this.userInfo = res.data.data;
      });
    }
  },
  filters: {
    formatTime(val) {
      return dateTime({ data: val });
    }
  },
  created() {
    var token = getToken();
    if (token) {
      this.userInfo.nick = token;
      this.getData(token);
    } else {
      this.$router.push("/login");
    }
  }
};
</script>
<style>
.head {
  height: 50px;
  line-height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  font-size: 22px;
  font-weight: bold;
}
.center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}
.avatar {
  height: 300px;
}
</style>
